<template>
	<view class="user-center-container bg">
		<view class="user-center-head-box"></view>
		<view class="user-center-avatar-box">
			<view class="user-center-avatar-box-inner">
				<view class="avatar">
					<u-avatar size="80" fit="contain" round />
				</view>
				<view class="user-login-post">
					<view>{{ userInfo.emp.name || '暂无' }}</view>
					<view class="post">{{ userInfo.emp.postName || '暂无' }}</view>
				</view>
				<view class="other-msg">
					<view class="flex-start-center">
						<view class="el-space"><u-icon size="20" name="home"></u-icon></view>
						<view>{{ userInfo.workshop.defaultWorkshopName || '暂无' }}</view>
					</view>
					<view class="flex-start-center">
						<view class="el-space"><u-icon size="20" name="calendar"></u-icon></view>
						<view>{{ userInfo.group.defaultGroupName || '暂无' }}</view>
					</view>
				</view>
			</view>
		</view>
		<!--<view class="msg-list-group">
			<view class="msg-list-item" @click.native="onChangePwdBtn">
				<view class="flex-start-center">
					<u-icon size="20" name="setting"></u-icon>
					<view class="msg-list-item-text">账户安全</view>
				</view>
                <view class="flex-end-center">
                    <u-icon size="20" name="edit-pen-fill"></u-icon>
                </view>
			</view>
		</view>-->
        <view class="msg-list-group">
            <view class="msg-list-item">
                <view class="flex-start-center">
                    <u-icon size="20" name="account"></u-icon>
                    <view class="msg-list-item-text">用户角色</view>
                </view>
                <view class="flex-end-center">
                    <view
                        v-for="item in userInfo.roleList"
                        :key="item"
                        style="margin-left: 12rpx;"
                    >
                        <u-tag :text="item.name" size="mini" plain type="info"></u-tag>
                    </view>
                </view>
            </view>
        </view>
		<view class="msg-list-group">
			<view class="msg-list-item msg-list-item-border">
				<view class="flex-start-center">
					<u-icon size="20" name="share"></u-icon>
					<view class="msg-list-item-text">所属部门</view>
				</view>
				<view class="flex-end-center">
					<view>{{ userInfo.emp.deptName || '暂无' }}</view>
				</view>
			</view>
			<view class="msg-list-item">
				<view class="flex-start-center">
					<u-icon size="20" name="calendar"></u-icon>
					<view class="msg-list-item-text">所属班次</view>
				</view>
				<view class="flex-end-center">
					<view>{{ userInfo.shiftName || '暂无' }}</view>
				</view>
			</view>
		</view>
		<view class="msg-list-group">
			<view class="msg-list-item" @click="onClearCached">
				<view class="flex-start-center">
					<u-icon size="20" name="trash"></u-icon>
					<view class="msg-list-item-text">清除缓存</view>
				</view>
				<u-icon name="arrow-right" color="#808695"></u-icon>
			</view>
		</view>
        <view @click="onUnBindWxBtn" class="out-login">解绑微信</view>
        <view @click="onLoginOutBtn" class="out-login">退出登录</view>
		<changePwdModal
            :user-id="userInfo.userId"
            :show="changePwdModalState"
            @close="onCloseOfChangePwdModal"
			@confirm="onConfirmOfChangePwdModal"
        ></changePwdModal>
	</view>

</template>

<script>
import {
    homeMyInfo,
    systemAuthGetPermissionInfo, systemAuthWxUntie
} from "../../api";
import {
    getOpenId,
    removeCorpCode, removeOpenId,
    removePassword,
    removeToken,
    removeUsername
} from "../../utils/auth";
	import changePwdModal from './change-pwd-modal';
	export default {
		components: {
			changePwdModal
		},
		data() {
			return {
				changePwdModalState: false,
				userInfo: {
					emp: {},
					group: {},
					workshop: {},
                    roleList: []
				}
			}
		},
		onShow() {
			this.getUserInfoRequest();
		},
		methods: {
            onUnBindWxBtn() {
                uni.showModal({
                    title: '提示',
                    content: '确认解除微信绑定吗？',
                    success: function(res) {
                        if (res.confirm) {
                            systemAuthWxUntie({
                                openId: getOpenId()
                            }).then(res => {
                                if (res.data.status === 200) {
                                    removeOpenId();
                                    removeToken();
                                    removeCorpCode();
                                    removeUsername();
                                    removePassword();
                                    wx.navigateTo({
                                        url: '/pages/login/index'
                                    });
                                }
                            })
                        }
                    }
                });
            },
			onCloseOfChangePwdModal() {
				this.changePwdModalState = false;
			},
			onChangePwdBtn() {
				if (this.userInfo.userId) {
					// this.changePwdModalState = true;
				} else {
					// tipBar('custom', '用户未绑定员工', 'error');
				}
			},
			onConfirmOfChangePwdModal() {
				this.changePwdModalState = false;
				removeToken();
				removeCorpCode();
				removeUsername();
				removePassword();
				wx.navigateTo({
					url: '/pages/login/index'
				});
			},
			onClearCached() {
				uni.showModal({
					title: '提示',
					content: '确认清除所有缓存？',
					success: function(res) {
						if (res.confirm) {
                            removeOpenId();
                            removeToken();
							removeCorpCode();
							removeUsername();
							removePassword();
							wx.navigateTo({
								url: '/pages/login/index'
							});
						}
					}
				});
			},
			onLoginOutBtn() {
				uni.showModal({
					title: '提示',
					content: '确认退出当前账号？',
					success: function(res) {
						if (res.confirm) {
							removeToken();
							wx.navigateTo({
								url: '/pages/login/index'
							});
						}
					}
				});
			},
			getUserInfoRequest() {
				systemAuthGetPermissionInfo().then(res => {
					if (res.data.status === 200) {
						this.userInfo = {
							...this.userInfo,
							emp: res.data.res.emp,
							group: res.data.res.group,
							workshop: res.data.res.workshop,
                            roleList: res.data.res.roleList ? res.data.res.roleList : []
                        };
					}
				})
			}
		}
	}
</script>

<style>
	.user-center-container {
		width: 100vw;
		height: 100vh;

	}

	.user-center-head-box {
		width: 100%;
		height: 460rpx;
		background: #5267F6;
		display: flex;
		justify-content: center;
	}

	.user-center-avatar-box {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cell-val {
		color: #808695;
	}

	.user-center-avatar-box-inner {
		width: 84%;
		max-width: 760rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 20rpx 32rpx;
		border: solid 1rpx #eee;
		margin-top: -150rpx;

	}

	.msg-list-group {
		background: #fff;
		margin-top: 20rpx;

	}

	.msg-list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		padding: 24rpx 32rpx;

	}

	.msg-list-item-text {
		margin-left: 14rpx;
	}

	.msg-list-item-border {
		border-bottom: solid 2rpx #e8eaec;
	}

	.out-login {
		height: 80rpx;
		color: #2d8cf0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		margin-top: 40rpx;
		letter-spacing: 4rpx;
		font-size: 32rpx;
	}

	.avatar {
		margin-top: -90rpx;
		flex-shrink: 0;
	}

	.user-login-post {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
		font-size: 34rpx;

	}

	.post {
		color: #808695;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.other-msg {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #808695;
		margin-top: 40rpx;
	}
</style>
